<template>
  <a-table
    :columns="tableColumn"
    :locale="{emptyText: '请添加规格'}"
    :data-source="tableValue"
    rowKey="id"
    bordered
  >
    <template slot="title" v-if="extraTableColumns.length > 0">
      <a-row type="flex" justify="start" align="middle">
        <a-col>批量设置:</a-col>
        <a-col
          v-for="(col, index) in extraTableColumns"
          :key="index"
          v-if="batchSettingExtendedButtonVisible && (!col.hasOwnProperty('editable') || (col.hasOwnProperty('editable') && col.editable === true)) && (!col.hasOwnProperty('hidden') || (col.hasOwnProperty('hidden') && col.hidden === false))"
        >
          <a-button type="link" @click="handleBatchSettingExtendedInput(col.scopedSlots.customRender)">
            {{ col.title }}
          </a-button>
        </a-col>

        <a-col v-if="!batchSettingExtendedButtonVisible" style="margin-left:10px">
          <a-row type="flex" justify="start" align="middle">
            <a-col>
              <a-input
                :ref="batchSettingExtendedInputRef"
                @blur="e => {handleBatchSettingExtendedInputConfirm(e)}"></a-input>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </template>

    <template
      v-for="(col, index) in extraTableColumns.filter(column => !column.hasOwnProperty('hidden') || (column.hasOwnProperty('hidden') && column.hidden === false))"
      :slot="col.scopedSlots.customRender"
      slot-scope="text, record"
    >
      <a-input-number
        v-if="!col.hasOwnProperty('editable') || (col.hasOwnProperty('editable') && col.editable === true)"
        :key="`${col.scopedSlots.customRender}_${record.id}`"
        v-model="record[col.scopedSlots.customRender]"
        @blur="e => tableColInputChange(e.target.value, col.scopedSlots.customRender, record)"
      />
      <span
        v-else
        :key="`${col.scopedSlots.customRender}_${record.id}_show`"
      >{{ record[col.scopedSlots.customRender] }}</span>
    </template>
  </a-table>
</template>

<script>

  export default {
    name: 'SkuTable',
    props: {
      value: {
        type: Array,
        default: () => []
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      extraColumns: {
        type: Array,
        default: () => []
      },
      multipleSpecification: {
        type: Object,
        default: () => {
        }
      },
      multipleSpecificationDetail: {
        type: Object,
        default: () => {
        }
      }
    },
    watch: {
      value: {
        handler (val) {
          this.tableValue = val

          if (this.tableValue.length > 0 && !this.isInitialed) {
            this.isInitialed = true

            // 初始化扩展 key
            this.extraTableColumns.forEach(column => {
              this.tableValue.forEach(item => {
                item[column.scopedSlots.customRender] = item.hasOwnProperty(column.scopedSlots.customRender) ? item[column.scopedSlots.customRender] : ''
                // 扩展值
                this.tableColInputChange(item[column.scopedSlots.customRender], column.scopedSlots.customRender, item)
              })
            })
          }
        },
        immediate: true
      },
      multipleSpecification: {
        handler (val) {
          this.specification = val
          this.refreshTable()
        },
        deep: true,
        immediate: true
      },
      multipleSpecificationDetail: {
        handler (val) {
          this.specificationDetail = val
          this.refreshTable()
        },
        deep: true,
        immediate: true
      }
    },
    data () {
      return {
        tableColumn: JSON.parse(JSON.stringify(this.extraColumns)), // table 的所有 column; 初始化时 扩展 column 为一开始的 column
        tableValue: this.value, // table 的所有 value
        extraTableColumns: JSON.parse(JSON.stringify(this.extraColumns)), // table 所有 column 中 有 input 框的部分 column
        extraTableValues: [], // 存放 input 框的值
        specification: {}, // 规格
        specificationDetail: {}, // 规格下的明细

        batchSettingExtendedInputRef: '', // 批量设置的 ref
        batchSettingExtendedButtonVisible: true, // 批量设置是否可见

        isInitialed: false
      }
    },
    methods: {
      /**
       * 扩展 input change
       */
      tableColInputChange (value, col, record) {
        const routeId = this.generatePathIdentifier(record).join('&')
        if (!this.extraTableValues.hasOwnProperty(routeId)) {
          this.extraTableValues[routeId] = {}
        }
        // 把扩展 (比如 入仓价 什么的这种) 输入的存入扩展值池里
        this.extraTableValues[routeId][col] = value

        this.$emit('input', this.tableValue)
        this.$emit('change', this.tableValue)
      },
      /**
       * 生成sku路径标识
       * @param record
       * @returns {[]}
       */
      generatePathIdentifier (record) {
        var id = []
        Object.keys(record).forEach(key => {
          if (!isNaN(parseFloat(key)) && isFinite(key)) {
            id.push(`${key}:${record[key]}`)
          }
        })
        return id
      },
      /**
       * 刷新 table 数据
       */
      refreshTable () {
        this.$nextTick(function () {
          try {
            // 规格
            const multipleSpecification = this.specification
            if (multipleSpecification === null) {
              return
            }

            const temp = JSON.parse(JSON.stringify(this.extraTableColumns))
              // 过滤要隐藏在表单里的 (一般用在要隐藏起来的业务值之类的)
              .filter(columns => !columns.hasOwnProperty('hidden') || (columns.hasOwnProperty('hidden') && columns.hidden === false))
            const specification = this.isEdit ? Object.keys(multipleSpecification) : Object.keys(multipleSpecification).reverse() // 编辑时, 因为 id 作为 key 然后顺序是反的, 这里需要颠倒下
            specification.forEach(index => {
              temp.unshift({
                title: multipleSpecification[index],
                dataIndex: index
              })
            })
            this.tableColumn = temp

            // 规格明细
            this.tableValue = [] // 重置后 重新计算
            var specificationKeys = Object.keys(multipleSpecification)
            if (specificationKeys[0] === undefined) {
              return
            }
            this.organizeTableData(specificationKeys[0], {}, specificationKeys)
          } catch (e) {
            console.error(e)
          } finally {
            this.$emit('input', this.tableValue)
            this.$emit('change', this.tableValue)
          }
        })
      },
      /**
       * 根据规格递归 重新计算出 表格值
       * @param currentSpecificationKey
       * @param tableValue
       * @param specificationKeys
       */
      organizeTableData (currentSpecificationKey, tableValue, specificationKeys) {
        // 是否为第一级, 则初始化 tableValue 扩展字段
        if (specificationKeys.indexOf(currentSpecificationKey) === 0) {
          this.extraTableColumns.forEach(column => {
            tableValue[column.scopedSlots.customRender] = ''
          })
        }
        if (!this.specificationDetail.hasOwnProperty(currentSpecificationKey) || this.specificationDetail[currentSpecificationKey].length === 0) {
          this.tableValue.push(
            Object.assign(
              {
                [currentSpecificationKey]: '',
                id: Math.random().toString(32).substring(2) // 标识 ID
              },
              tableValue
            )
          )
          return
        }

        this.specificationDetail[currentSpecificationKey].forEach(value => {
          // 是否有下一级
          var currentKey = specificationKeys.indexOf(currentSpecificationKey) // 当前层级
          if (currentKey !== -1 && specificationKeys.hasOwnProperty(currentKey + 1)) {
            tableValue[currentSpecificationKey] = value
            // 递归下去
            this.organizeTableData(specificationKeys[currentKey + 1], tableValue, specificationKeys)
          } else {
            var record = Object.assign(
              Object.assign({}, tableValue),
              {
                [currentSpecificationKey]: value,
                id: Math.random().toString(32).substring(2) // 标识 ID
              }
            )

            // 扩展值
            var extendValues = {}
            var routeId = this.generatePathIdentifier(record).join('&')
            if (this.extraTableValues.hasOwnProperty(routeId)) {
              extendValues = this.extraTableValues[routeId]
            } else {
              this.extraTableValues[routeId] = {}
              this.extraTableColumns.forEach(column => {
                this.extraTableValues[routeId][column.scopedSlots.customRender] = '' // 创建 col 数据的时候, 也初始化扩展值池
              })
            }

            this.tableValue.push(Object.assign(record, extendValues))
          }
        })
      },
      /**
       * 批量设置输入框显示
       * @param type
       */
      handleBatchSettingExtendedInput (type) {
        this.batchSettingExtendedInputRef = `${type}:BatchSettingExtendedInputRef`
        this.batchSettingExtendedButtonVisible = false
        this.$nextTick(_ => this.$refs[this.batchSettingExtendedInputRef].focus())
      },
      /**
       * 批量输入框确认
       * @param e
       */
      handleBatchSettingExtendedInputConfirm (e) {
        this.batchSettingExtendedButtonVisible = true
        const inputRefArr = this.batchSettingExtendedInputRef.split(':')
        // 把扩展值池里的属性值 都 改变
        Object.keys(this.extraTableValues).forEach(key => {
          this.extraTableValues[key][inputRefArr[0]] = e.target.value
        })

        this.refreshTable()
      }
    }
  }
</script>

<style scoped>

</style>
